import React from 'react';
import {NavBar} from 'antd-mobile'
import './index.scss'
import {withRouter} from 'react-router-dom'
import PropTypes from 'prop-types'
import styles from './index.module.css'

class NavHeader extends React.Component {
    render() {
        let defaultHandler = () => {
            this.props.history.go(-1)
        }
        return (
            <NavBar
                className={styles.navBar}
                // 模式 默认值是 dark
                mode="light"
                // 左侧小图片
                icon={<i className='iconfont icon-back'/>}
                // 左侧按钮的点击事件
                onLeftClick={this.props.onLeftClick || defaultHandler}
            >{this.props.children}</NavBar>
        )
    }


}

NavHeader.propTypes = {
    children: PropTypes.string.isRequired,
    onLeftClick: PropTypes.func
}

// 通过withRouter 包装一层后，返回的还是一个组件，这个跟我们之前讲到的包装组件很类似
export default withRouter(NavHeader)
